<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <link href="css/SYSFrame.css" rel="stylesheet" type="text/css" />
    <link href="font/iconfont.css" rel="stylesheet" type="text/css" />
    <link href="css/module.css" rel="stylesheet" type="text/css" />
    <link href="css/pages.css" rel="stylesheet" type="text/css" />
    <title>分类管理</title>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.cookie.js" type="text/javascript"></script>
    <script src="js/jquery.nicescroll.js" type="text/javascript"></script>
    <script src="js/HUpages.js" type="text/javascript"></script>
    <script src="js/layer/layer.js" type="text/javascript"></script>
    <script src="js/template.js" type="text/javascript"></script>
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js" type="text/javascript"></script>
    <script src="js/css3-mediaqueries.js"  type="text/javascript"></script>
    <![endif]-->
</head>

<body id="pagestyle" class="backgroundf0">
<div class="box-module">
    <div class="box-title">当前分类(最多添加20个分类)</div>
    <div class="box-content padding15">
        <div id="sort_list" class="sortList brandlist"></div>
    </div>
</div>
<!--添加修改分类-->
<div id="sortcontent" class="" style="display: none;"></div>
</body>
</html>
<script id="sorthtml" type="text/html">
    <% for(var i = 0; i < list.length; i++) { %>
    <div class="brand-info">
        <div class="brand_operating">

            <% if(list[i].status==0) {%>
            <span class="name_status  btn-danger plf10" data-id="0" onclick="clickstatus(this)">关闭</span>
            <%} if(list[i].status==1) {%>
            <span class="name_status btn-green  plf10" data-id="1" onclick="clickstatus(this)">启用</span>
            <%}%>
            <span class="l_f sortname"><%=list[i].name%></span>
            <a href="javascript:void(0)" class="iconfont deletebtn brand_operat" title="删除分类" onclick="deleteBrand(this,<%=list[i].id%>)">&#xe6b4</a>
            <a href="javascript:void(0)" class="iconfont brand_operat modifybtn" id="modifyN" title="修改分类" onclick="modifyBrand(this,<%=list[i].id%>)">&#xe61a</a>
            <a href="javascript:void(0)" title="添加分类" class="iconfont deletebtn brand_operat" onclick="addsort(this,<%=list[i].id%>)">&#xe61d</a>
        </div>
        <div class="clearfix brand_border padding0">
            <div class="sortQuantity scroll_cont">
                <% if(list[i].classify!=""){%>
                <% for(var j = 0; j < list[i].classify.length; j++) { %>
                <a href="javascript:void()" class="sortblock btn btn-blue padding5 mb10 " onclick="">
                    <%=list[i].classify[j].name%> (
                    <%=list[i].classify[j].quantity %> )
                    <em class="deletesort iconfont" onclick="deletesort(this,<%=list[i].id%>)">&#xe70a</em>
                </a>
                <%}%>
                <% }else { %>
                <div class="text-center">该分类下还没有子栏目	</div>
                <%}%>
            </div>
            <div class="brand_content">
                <h5 class="brand_title">
                    <span class="l_f ml15">商品数量：<%=list[i].quantity%></span>
                    <span class="r_f mr15">共有：<%=list[i].classify.length%>个子分类</span>
                </h5>
            </div>
        </div>
    </div>
    <% } %>
    <% if(list.length<=20) {%>
    <div class="brand-info addkuaidi">
        <a href="javascript:void(0)" class="iconfont" onclick="addkuaidi('',0)">
            &#xe61d
        </a>
    </div>
    <% } %>

</script>
<script>
    $(function() {
        $("#pagestyle").Hupage({
            scroll_cont: ".scroll_cont",
            scrollbar: function(e) {
                e.niceScroll({
                    cursorcolor: "#dddddd",
                    cursoropacitymax: 1,
                    touchbehavior: false,
                    cursorwidth: "3px",
                    cursorborder: "0",
                    cursorborderradius: "3px",
                });
            },
            expand: function(thisBox, settings) {
                settings.scrollbar(thisBox); //设置当前页滚动
                //数据加载
                var wuliu = function(callback) {
                    $.ajax({
                        url: "json/products.json",
                        type: "GET",
                        dataType: 'json',
                        success: function(ret) {
                            typeof callback == 'function' && callback(ret);
                        },
                    });
                };
                wuliu(function(listArr) {
                    var id = "";
                    var sortname = $('#sort_list');
                    var html = template('sorthtml', {
                        list: listArr.sort
                    });
                    sortname.html(html);
                    $("#sorthtml").remove();
                    data = "";
                    edithtml(listArr,data, id);
                    settings.scrollbar($(settings.scroll_cont));//设置需要滚动的区域
                });
            }
        });
    });
    //内容方法
    function edithtml(dataArr,data, id) {
        $.ajax({
            url: "html/sort/content.html",
            type: "GET",
            dataType: "html",
            success: function(result) {
                $('body').append("<script id='contenthtml' type='text/html'>" + result + "</script\>");
                var content = $('#sortcontent');
                var htmls = template('contenthtml', {
                    id: id,
                    content: data,
                    list:dataArr.sort
                });
                content.html('');
                content.html(htmls);
                var radios = document.getElementsByName("statusradio");
                for(var i = 0; i < radios.length; i++) {
                    var radioid = radios[i].dataset.id;
                    radios[0].checked=true;
                    if(data!=""){
                        if(data[0].status==radioid) {
                            radios[i].checked=true;
                        } else {
                            radios[i].checked=false;
                        }
                    }
                };
                $("#contenthtml").remove(); //加载完毕删除模版路径
            }
        });
    }
    //添加分类
    function addkuaidi(data,id){
        layer.open({
            type: 1,
            title: '添加分类',
            maxmin: true,
            shadeClose: false, //点击遮罩关闭层
            area: ['500px', '400px'],
            content: $('#sortcontent'),
            btn: ['确认添加', '取消'],
            yes: function(index, layero) {

            }
        });
        var listdata = function(callback) {
            $.ajax({
                url: "json/products.json",
                type: "GET",
                dataType: 'json',
                success: function(ret) {
                    typeof callback == 'function' && callback(ret);
                },
            });
        };
        listdata(function(dataArr) {
            edithtml(dataArr,data, id)
        })
    }
    //修改分类
    function modifyBrand(obj,id){
        var listdata = function(callback) {
            $.ajax({
                url: "json/products.json",
                type: "GET",
                dataType: 'json',
                success: function(ret) {
                    typeof callback == 'function' && callback(ret);
                },
            });
        };
        listdata(function(dataArr) {
            if(id == 0) {
                var data = null;
            } else {
                var data = dataArr.sort.filter(function(e) {
                    return e.id == id;
                });
            }
            layer.open({
                type: 1,
                title: '修改分类',
                maxmin: true,
                shadeClose: false, //点击遮罩关闭层
                area: ['500px', '400px'],
                content: $('#sortcontent'),
                btn: ['确认修改', '取消'],
                yes: function(index, layero) {

                }
            });
            edithtml(dataArr,data, id);
        });


    }
</script>
<script type="text/javascript" src="js/common.js"></script>